<script>
import {defineComponent} from 'vue'
import store from "@/stores/store";
import axios from "axios";
import top from '../../components/common/nav-head.vue'
import bottom from '../../components/common/bottom.vue'

export default defineComponent({
  name: "main-show",
  components:{
    top,
    bottom
  },
  computed:{
    account(){
      return store.getters.getAccount
    }
  },
  data(){
    return{
      store,
      category:'',
      products:[],
      productListInfo:[]
    }
  },
  created() {
  this.getData();
  const productListPromise = this.getProductList_axios(this.$route.query.category);

  productListPromise.then(async response => {
    this.products = response.data.data;
    const productPromises = this.products.map(product => {
      return this.getProduct_axios(product.productId).then(response => {
       
        let productInfo = {
          productId:'',
          name: '',
          image: ''
        };
        productInfo.productId=product.productId
        productInfo.name = product.name;
        productInfo.image = response.data.data.photo;
        return productInfo;
      });
    });
    
    this.productListInfo = await Promise.all(productPromises);


  }).then(()=>{console.log(this.productListInfo[0].productId)}).catch(error => {
    console.error('异常', error);
  });
}
,
  methods:{
   getData(){
    this.category=this.$route.query.category
   },
   returnMain(){
    this.$router.push({name:'main'});
   },
   getProductList_axios(category){
    return axios({
		url:'http://localhost:8080/showProductList',
		method:'GET',
		//withCredentials: true,
		params:{
		    category:category
		}
	  })
   },
   getProduct_axios(productId){
    return axios({
		url:'http://localhost:8080/getProduct',
		method:'POST',
		//withCredentials: true,
		params:{
		    productId:productId
		}
	  })
   },
   picinfo(productId){
    this.$router.push({name:'picinfo',query:{productId:productId}});
   },
   toMain(){
    this.$router.push({name:'main'});
   },
  }
})
</script>

<template>
<div class="crumb">
    <div class="w">
        
        <div class="crumb-content">
            <a href="#" class="link" @click="toMain()">MyStore</a>
                  <span>></span>
                  <span class="link-text">category:{{ category }}</span>
        </div>
    </div>
</div>

<div class="w panel">
    <div id="BackLink">
        <a href="#" @click="returnMain()">Return to Main Menu</a>
    </div>

    <div id="Catalog">

        <h2 id="title">{{category}}</h2>
        <div id="ShowBox">
            <div class="container" v-for="info in productListInfo">
              <div class="card">
                <div class="content">
                  <div><img :src="'data:image/png;base64,'+info.image"/></div>
                  <h3>{{ info.name }}</h3>
                  <h5>{{ info.productId }}</h5>
                  <a href="#" @click="picinfo(info.productId)">Read More</a>
                </div>
              </div>
            </div>
          </div>

      
    </div>
</div>
</template>

<style scoped>
@import "@/assets/MainPage/css/Main.css";
@import "@/assets/MainPage/css/cart.css";
@import "@/assets/MainPage/css/signOn.css";
</style>